<template>
  <div class="accountList">
    <p style="padding: 10px; border-bottom: 1px solid #f2f2f2; font-size: 18px">
      帐号列表
    </p>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="帐号" prop="account" width="120">
      </el-table-column>

      <el-table-column prop="userGroup" label="用户组" width="200">
      </el-table-column>

      <el-table-column
        prop="ctime"
        label="创建时间"
        width="300"
        show-overflow-tooltip
      >
      </el-table-column>

      <el-table-column label="操作" min-width="200px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            style="background: #ffcc00; color: #fff"
            @click="dialogVisible = true"
            @click.native="editBtn(scope.row)"
            >编辑</el-button
          >
          <el-button size="mini" type="danger" @click="delBtn(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block" style="padding: 10px">
      <el-pagination
        :page-sizes="pagesizes"
        :page-size="pagenum"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @current-change="curchange"
        @size-change="sizechange"
      >
      </el-pagination>
    </div>

    <div style="padding: 10px">
      <el-button type="danger" @click="batchdelBtn">批量删除</el-button>
      <el-button @click="cancelBtn" type="success">取消选择</el-button>
    </div>
    <!-- 修改弹框 -->
    <el-dialog title="修改帐号" :visible.sync="dialogVisible" width="30%">
      <el-input v-model="accVal"></el-input>

      <p style="margin: 20px 0 0 0">
        用户组:
        <el-select
          style="width: 300px"
          v-model="usergroup"
          slot="prepend"
          placeholder="请选择用户组"
        >
          <el-option label="超级管理员" value="超级管理员"></el-option>
          <el-option label="普通管理员" value="普通管理员"></el-option>
        </el-select>
      </p>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="success"
          @click="dialogVisible = false"
          @click.native="sureBtn"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  accountlist,
  accountdel,
  accountbatchdel,
  accountedit,
} from "@/apis/users";
import { getYYYYMMDDHHMMSS } from "@/utils/utils";
export default {
  data() {
    return {
      tableData: [], //数据
      total: 0, //总条数
      pagenum: 5, //每页条数
      pagesizes: [5, 15, 20], //每页条数
      curpage: 1, //当前页码
      multipleSelection: [], //选中状态
      selectIds: [], //id
      dialogVisible: false,
      accVal: "", //输入框帐号
      usergroup: "普通管理员",
    };
  },

  methods: {
    //分页
    curchange(page) {
      this.curpage = page;
      this.pageChange();
    },
    sizechange(num) {
      this.pagenum = num;
      this.pageChange();
    },
    //获取列表
    pageChange() {
      if (this.isclickpages) {
        this.$message({
          message: "系统提示：操作过于频繁,稍后再试噢 （⊙ｏ⊙）",
          type: "warning",
        });
        return;
      }
      this.isclickpages = true;

      setTimeout(() => {
        this.isclickpages = false;
      }, 500);

      accountlist({ currentPage: this.curpage, pageSize: this.pagenum }).then(
        (res) => {
          // console.log(res.data.data);
          for (let obj of res.data.data) {
            obj.ctime = getYYYYMMDDHHMMSS(obj.ctime);

            // this.userGroup.push(obj.userGroup)
          }
          this.tableData = res.data.data;
          this.total = res.data.total;
        }
      );
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //删除
    delBtn(id) {
      this.$confirm(
        "此操作会永久删除该数据哦~, 是否继续?(。>︿<)_θ",
        "系统提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass:'closeBtn',
          confirmButtonClass:'sureBtn',
          type: "warning",
        }
      )
        .then(() => {
          accountdel({ id: id }).then((res) => {
            if (res.data.code == 0) {
              this.$message({
                showClose: true,
                message: "系统提示：删除成功",
                type: "success",
              });
            }
            this.pageChange();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "系统提示：已取消删除(/▽＼)",
          });
        });
      // console.log(id);
    },
    //批量删除
    batchdelBtn() {
      for (let ids of this.multipleSelection) {
        this.selectIds.push(ids.id);
      }
      this.$confirm(
        "此操作会永久删除这些数据哦~, 是否继续?(。>︿<)_θ",
        "系统提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass:'closeBtn',
          confirmButtonClass:'sureBtn',
          type: "warning",
        }
      )
        .then(() => {
          accountbatchdel({ ids: JSON.stringify(this.selectIds) }).then(
            (res) => {
              if (res.data.code == 0) {
                this.$message({
                  showClose: true,
                  message: "系统提示：批量删除成功 (。・ω・。)",
                  type: "success",
                });
              }
              this.pageChange();
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "系统提示：已取消删除(/▽＼)",
          });
        });
    },
    //取消选择
    cancelBtn() {
      this.$refs.multipleTable.clearSelection();
    },
    //点击编辑
    editBtn(item) {
      console.log(item);
      this.accVal = item.account;
      this.account = item.account;
      this.id = item.id;
      this.usergroup = item.userGroup;
    },
    //点击确定
    sureBtn() {
      // console.log();
      accountedit({
        id: this.id,
        account: this.accVal,
        userGroup: this.usergroup,
      }).then((res) => {
        // console.log(res.data);
        if (res.data.code == 0) {
          //修改当前帐号信息,更改页头账号名
          if(this.id==localStorage.userId){
            this.$bus.emit('HomeUserName', this.accVal)
          }

          this.pageChange();
          this.$message({
            showClose: true,
            message: "系统提示：修改管理员成功 (✿◕‿◕✿)",
            type: "success",
          });
        }
      });
    },
  },
  created() {
    this.pageChange();

     this.$bus.emit('subTitle','帐号管理>','帐号列表>')

  },
};
</script>

<style lang="less" scoped>
.accountList {
  background: #fff;
}
</style>